
import { useState } from 'react';
import NarBar from '../../hooks/NavBar';

function Index() {
  const [selectedMonth] = useState('2020年1月');

  const handleMoreOptions = () => {
    console.log('更多选项');
  };

  const handleTarget = () => {
    console.log('目标功能');
  };

  const handleMonthChange = () => {
    console.log('选择月份');
  };

  // 模拟充值记录数据 - 完全按照图片内容
  
  const rechargeRecords = [
    {
      id: 1,
      type: '住院充值',
      paymentMethod: '微信支付',
      status: '已支付',
      orderNumber: '20200101152020001',
      time: '2020-01-01 15:20:20',
      amount: 100.00
    },
    {
      id: 2,
      type: '住院充值',
      paymentMethod: '微信支付',
      status: '已支付',
      orderNumber: '20200101152020001',
      time: '2020-01-01 15:20:20',
      amount: 100.00
    },
    {
      id: 3,
      type: '住院充值',
      paymentMethod: '微信支付',
      status: '已支付',
      orderNumber: '20200101152020001',
      time: '2020-01-01 15:20:20',
      amount: 100.00
    }
  ];

  const totalAmount = rechargeRecords.reduce((sum, record) => sum + record.amount, 0);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 - 100%还原 */}
      <NarBar 
        title='充值记录'
        right={
          <div style={{
            display: 'flex',
            alignItems: 'center',
            background: '#f5f5f5',
            borderRadius: '16px',
            overflow: 'hidden'
          }}>
            <div 
              onClick={handleMoreOptions}
              style={{
                padding: '8px 12px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
              }}
            >
              <span style={{ fontSize: '16px', color: '#666' }}>⋯</span>
            </div>
            <div style={{
              width: '1px',
              height: '20px',
              background: '#d9d9d9'
            }} />
            <div 
              onClick={handleTarget}
              style={{
                padding: '8px 12px',
                cursor: 'pointer',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                background: '#e6e6e6'
              }}
            >
              <span style={{ fontSize: '16px', color: '#333' }}>◎</span>
            </div>
          </div>
        }
      />

      {/* 月份选择和汇总 - 100%还原 */}
      <div style={{
        display: 'flex',
        justifyContent: 'space-between',
        alignItems: 'center',
        padding: '16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div 
          onClick={handleMonthChange}
          style={{
            display: 'flex',
            alignItems: 'center',
            cursor: 'pointer'
          }}
        >
          <span style={{ fontSize: '16px', color: '#333', marginRight: '4px' }}>
            {selectedMonth}
          </span>
          <span style={{ fontSize: '12px', color: '#999' }}>▼</span>
        </div>
        <div style={{ fontSize: '16px', color: '#333' }}>
          共充值: <span style={{ fontWeight: 600 }}>{totalAmount.toFixed(2)}</span> 元
        </div>
      </div>

      {/* 充值记录列表 - 100%还原 */}
      <div style={{ padding: '16px' }}>
        {rechargeRecords.map((record) => (
          <div
            key={record.id}
            style={{
              background: '#fff',
              borderRadius: '8px',
              padding: '16px',
              marginBottom: '12px',
              position: 'relative',
              boxShadow: '0 1px 3px rgba(0,0,0,0.1)'
            }}
          >
            {/* 左侧蓝色条 - 精确还原 */}
            <div style={{
              position: 'absolute',
              left: 0,
              top: 0,
              bottom: 0,
              width: '4px',
              background: '#1677ff',
              borderRadius: '0 4px 4px 0'
            }} />

            {/* 充值类型 - 按照图片布局 */}
            <div style={{
              fontSize: '16px',
              fontWeight: 600,
              color: '#333',
              marginBottom: '12px',
              paddingLeft: '12px'
            }}>
              {record.type}
            </div>

            {/* 详细信息 - 按照图片布局 */}
            <div style={{ paddingLeft: '12px' }}>
              <div style={{ 
                fontSize: '14px', 
                color: '#666', 
                marginBottom: '4px',
                lineHeight: '1.4'
              }}>
                支付方式 {record.paymentMethod}
              </div>
              <div style={{ 
                fontSize: '14px', 
                color: '#666', 
                marginBottom: '4px',
                lineHeight: '1.4'
              }}>
                支付状态 {record.status}
              </div>
              <div style={{ 
                fontSize: '14px', 
                color: '#666', 
                marginBottom: '4px',
                lineHeight: '1.4'
              }}>
                订单号 {record.orderNumber}
              </div>
              <div style={{ 
                fontSize: '14px', 
                color: '#666',
                lineHeight: '1.4'
              }}>
                充值时间 {record.time}
              </div>
            </div>

            {/* 金额 - 按照图片位置显示在卡片右侧 */}
            <div style={{
              position: 'absolute',
              right: '16px',
              top: '16px',
              fontSize: '18px',
              fontWeight: 600,
              color: '#13c2c2'
            }}>
              +{record.amount.toFixed(2)}
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default Index;
